<!--
 * @Author: your name
 * @Date: 2020-05-14 20:25:19
 * @LastEditTime: 2020-05-14 22:55:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \source\components\db\tableInfo.vue
 -->
<template>
 <Card title="实体定义">
           <Form :model="dto" :label-width="60">
          <Row>
             <Col :span="6">
              <FormItem label="名称">
                <Input v-model="dto.tableDescription" placeholder="名称">
                  <Button slot="append"  icon="md-add"></Button>
                </Input>
              </FormItem>
            </Col>
            <Col :span="3">
              <FormItem label="实体名">
                <Input v-model="dto.entityName"></Input>
              </FormItem>
            </Col>
            <Col :span="3">
              <FormItem label="表名">
                <Input v-model="dto.dbTableName" placeholder="请输入表名"></Input>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="特征">
                <CheckboxGroup v-model="dto.tags">
                  <Checkbox :label="0">业务表</Checkbox>
                  <Checkbox :label="1">树表</Checkbox>
                  <Checkbox :label="2">视图</Checkbox>
                </CheckboxGroup>
              </FormItem>
            </Col>
            <Col :span="24">
              <FormItem label="关联项"></FormItem>
            </Col>
          </Row>
        </Form>
              <div class="utool">
        <div class="btns">
          <Checkbox v-model="base">基础字段</Checkbox>
          <Checkbox v-model="base">基础字段</Checkbox>
        </div>
      </div>
      <Table :columns="columns" :data="list" :max-height="600" border  >
        <template slot="exist" slot-scope="{row,index}">{{row.exist}}</template>
        <template slot="name" slot-scope="{row,index}">
          <Input
            v-model="row.name"
            v-if="row.exist==0"
            :key="row.id"
            @on-blur="setRow('name',row,index)"
            placeholder="请输入字段"
          ></Input>
          <span v-else>{{row.name}}</span>
        </template>
        <template slot="note" slot-scope="{row,index}">
          <Input
            v-model="row.note"
            :key="row.id"
            @on-blur="setRow('note',row,index)"
            placeholder="请输入备注"
          >
            <a slot="append" @click="yi(row,index,'note')">译</a>
          </Input>
        </template>
        <template slot="vType" slot-scope="{row,index}">
          <Select
            v-if="row.exist==0"
            v-model="row.vType"
            @on-change="setRow('vType',row,index)"
            transfer
          >
            <Option v-for="(item,i) in types" :key="item.value" :value="item.value">{{item.text}}</Option>
          </Select>
          <span v-else>{{row.vType}}</span>
        </template>
        <template slot="dot" slot-scope="{row}">{{row.dot}}</template>
        <template slot="isNull" slot-scope="{row}">
          <Checkbox v-model="row.add" @on-change="setRow('add',row,index)"></Checkbox>
          {{row.isNull}}
        </template>
        <template slot="action" slot-scope="{row,index}">
          <a class="edit" v-if="row.exist==0" @click="remove(row,index)">删除</a>
        </template>
      </Table>
      <div class="utool">
        <Button type="primary" @click="addField">添加字段</Button>
      </div>
 </Card>
</template>

<script>
 export default {
   data () {
     return {
       dto:{},
            base: true,
      list: [],
      columns: [
        {
          title: "#",
          width: 50,
          type: "index"
        },
        {
          title: "字段",
          key: "name",
          width: 150,
          slot: "name",
          hide: false
        },
        {
          title: "备注",
          key: "note",
          slot: "note",
          width: 210,
          hide: false
        },
        {
          title: "类型",
          key: "vType",
          width: 210,
          slot: "vType",
          hide: false
        },
        {
          title: "长度",
          key: "length",
          width: 210,
          hide: false
        },
        {
          title: "精度",
          key: "dot",
          width: 110,
          hide: false
        },
        {
          title: "可空",
          key: "isNull",
          width: 80,
          //   slot: "isNull",
          hide: false
        },
        {
          title: "操作",
          key: "action",
          //   width: 50,
          slot: "action",
          hide: false
        }
      ],
            types: [
        { text: "文本", value: "varchar(200)" },
        { text: "文件", value: "varchar(200)" },
        { text: "附件", value: "varchar(200)" },
        { text: "数字", value: "int(11)" },
        { text: "字典", value: "tinyint(4)" },
        { text: "标签", value: "varchar(399)" },
        { text: "时间", value: "datetime" },
        { text: "备注", value: "varchar(2000)" },
        { text: "富文本", value: "text" },
        { text: "小数", value: "double(10,2)" }
      ]
     }
   },
   components: {},
   methods: {
         addField() {
      let fields = this.list;
      let field = {
        id: this.id,
        databaseName: null,
        tableName: null,
        name: "",
        isKey: false,
        vType: "varchar(200)",
        type: "varchar",
        length: 200,
        dot: 0,
        isNull: "YES",
        note: "",
        default: null,
        link: null,
        exist: 0
      };
      fields.push(field);
      this.id += 1;
      this.$set(this.list, fields);
    },
   }
 }
</script>

<style style="less">

 
</style>
